<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app" v-clock>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
    },
    // 经典的promise案例：通常.then()方法是异步执行的，pending状态中会继续向下执行方法
    // 加上async/await后会等待.then()方法执行完成再去向下执行其他方法
    mounted () {
      new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
      }).then(() => {
        console.log(3)
      })
      console.log(4)
      // 结果1243
    },
    // async mounted () {
    //   await new Promise((resolve, reject) => {
    //     console.log(1)
    //     resolve()
    //     console.log(2)
    //   }).then(() => {
    //     console.log(3)
    //   })
    //   console.log(4)
    //   // 结果1234
    // },
    // 计算属性(实质上指的是方法的返回值)
    computed: {},
    methods: {
      test() {
        // constructor -> fn --同步--> resolve(reject) -> then -> then 回调
        // constructor -> fn --异步--> then -> resolve(reject) -> then 回调
        // 同步
        new Promise(function (resolve) {
          resolve(1)
        }).then(function (val) {
          console.log(val)
        })
        // 异步
        new Promise(function (resolve) {
          setTimeout(function () {
           resolve(1)
          }, 1000)
        }).then(function (val) {
          console.log(val)
        })
      }
    }
  })
</script>
</html>